import React, { useState } from 'react'
import { Button, Modal, Space } from 'antd';
import { Tabs} from 'antd';
import { categoriesLabels, categories } from '../../../utils/icons'
const ImgModai = ({ isModalOpen, handleCancel, handleOk }) => {
    const onChange = (k) => {
        setYestest(k)
    };
    const [yestext, setYestest] = useState('direction')
    console.log(categories[yestext]);
    // function iconImg() {
    //     return categories[yestext].map(item => <Button><i style={{ display: 'inline-block' }} className={'iconfont iconfont-' + item}></ i></Button>
    //     )
    // }
    const arr = Object.keys(categoriesLabels).map(key => {
        return {
            label: <span style={{ margin: '0 21px' }}>{categoriesLabels[key]}</span>,
            key: key,
            children: <div>
                {categories[key].map(item => <Button><i style={{ display: 'inline-block' }} className={'iconfont iconfont-' + item.toLowerCase()}></ i></Button>
        )}
            </div>,

        }
    }
    )
    // const kkk = linkone()
    // console.log(kkk);
    return (
        <div>  <>
            <Modal open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width='1000px' closable={false}>
                <div style={{ width: '1000px' }}>
                    <Tabs
                        style={{
                            width: '945px',
                            display: 'flex',
                            justifyContent: 'space-evenly'
                        }}
                        size='large'
                        defaultActiveKey="1"
                        onChange={onChange}
                        items={[...arr]}
                    />
                </div>
            </Modal>
        </></div>
    )
}

export default ImgModai